<template>
  <div style="height:100%;width:100%;position:relative;">
      <div class="pagetop" style="text-align:left">
          <table style="width:100%;border-collapse:collapse;" class="QueryTable">
              <tr>
                  <td>
                      起始月份
                  </td>
                  <td style="width:130px">
                      <el-date-picker v-model="datetime1" type="month" placeholder="开始日期" value-format="yyyy-MM-01 00:00:00" size="mini" :clearable="false" style="width:130px"></el-date-picker>
                  </td>
                  <td>
                      结束月份
                  </td>
                  <td style="width:130px">
                      <el-date-picker v-model="datetime2" type="month" placeholder="结束日期" value-format="yyyy-MM-01 00:00:00" size="mini" :clearable="false" style="width:130px"></el-date-picker>
                  </td>
                  <td>质控仪器</td>
                  <td style="width:200px">
                      <rm-ddl-instrument width="100%" v-model="instrId" defaultflag="1" prgno="LIS542" :clearable="false" @change="instrChange"></rm-ddl-instrument>
                  </td>
                  <td>水平</td>
                  <td style="width:100px">
                      <rm-ddl-common datatype="seccode" kindno="QCLEVEL" dataname="水平" v-model="level" width="100%" @change="levelChange"></rm-ddl-common>
                  </td>
                  <td rowspan="2" style="width:auto;text-align:right;padding-right:5px">
                      <el-button @click="QueryData()" type="primary" style="padding-right:5px">查询</el-button>
                      <el-button @click="btnExport()" style="padding-right:5px">导出</el-button>
                  </td>
              </tr>
              <tr>
                  <td></td>
                  <td colspan="8" style="text-align: left">
                      <el-checkbox v-model="inuseflag" true-label="1" false-label="0">包含不累计</el-checkbox>
                      <el-checkbox v-model="controlstatus" true-label="1" false-label="0">包含失控</el-checkbox>
                      <el-checkbox v-model="drawflag" true-label="1" false-label="0">包含不画图</el-checkbox>
                      <el-checkbox v-model="checkflag" true-label="1" false-label="0">包含未审核</el-checkbox>
                      <el-checkbox v-model="monthflag" true-label="1" false-label="0">按月统计</el-checkbox>
                      <el-checkbox v-model="batchflag" true-label="1" false-label="0" @change="saveselect">按批号</el-checkbox>
                      <el-checkbox v-model="avgflag" true-label="1" false-label="0" @change="saveselect">显示均值</el-checkbox>
                  </td>
              </tr>
          </table>
      </div>
      <div class="pagecenter">
          <vxe-table show-overflow ref="xTable1" height="auto" :data.sync="tableData" border size="mini" :cell-class-name="ColumnClassName" show-header-overflow highlight-current-row highlight-hover-row show-footer resizable stripe>
              <vxe-table-column field="itemname" title="项目" width="160px" header-align="center"></vxe-table-column>
              <vxe-table-column field="qclevel" title="水平" width="60px" header-align="center" align="center"></vxe-table-column>
              <vxe-table-column field="batchno" title="批号" width="120px" header-align="center" align="center" v-if="batchflag=='1'"></vxe-table-column>
                <vxe-table-column field="avgval" title="均值" width="70px" header-align="center" align="center" v-if="batchflag!='0'&&avgflag=='1'"></vxe-table-column>
                  <vxe-table-column field="allcnt" title="个数" width="60px" header-align="center" align="center"  v-if="!(monthflag !='0'&&batchflag=='0')"></vxe-table-column>
              <vxe-table-column :field="item.field" :title="item.title" :key="item.field" width="70px" header-align="center" align="center" v-for="item in ColumnList"></vxe-table-column>
              <vxe-table-column field="measurecv" title="合计CV" width="70px" header-align="center" align="center"></vxe-table-column>
              <vxe-table-column field="qccv" title="允许CV" width="70px" header-align="center" align="center"></vxe-table-column>
              <vxe-table-column field="twotea" title="1/2TEA" width="70px" header-align="center" align="center"></vxe-table-column>
              <vxe-table-column field="threetea" title="1/3TEA" width="70px" header-align="center" align="center"></vxe-table-column>
              <vxe-table-column field="fourtea" title="1/4TEA" width="70px" header-align="center" align="center"></vxe-table-column>
              <vxe-table-column field="qctea" title="TEA" width="60px" header-align="center" align="center"></vxe-table-column>
          </vxe-table>
      </div>
  </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils"; //引入工具类
export default {
  name: "LIS542",
  data() {
      return {
          instrId: "",
          level: "",
          timeflag: "2",
          datetime1: "", //开始日期
          datetime2: "", //结束日期
          inuseflag: "0", //包含累计标志
          checkflag: "1", //包含未审核标志
          drawflag: "0", //包含不画图标志
          controlstatus: "0", //包含失控标志
          monthflag: "0", //按月统计
          batchflag: "1", //按批号统计
          avgflag: "1", //显示均值
          tableData: [],
          tableColumns: [],
          ColumnList: [],
          exportTableColLen: 0,
          instrname: "",
          levelname: "",
      };
  },
  created() {
      this.InitPageDate(); //初始化主列表
  },
  mounted() {
      let modOption1 = localStorage.getItem("rm_Qmod_LIS542");
      let modjson = JSON.parse(modOption1);
      if (modjson != null) {
          this.batchflag = modjson.batchflag;
          this.avgflag = modjson.avgflag;
      }
  },
  updated() {},
  methods: {
      saveselect() {
          let jsondate = {
              batchflag: this.batchflag,
              avgflag: this.avgflag,
          };
               let modListJson = JSON.stringify(jsondate);
          localStorage.setItem("rm_Qmod_LIS542", modListJson);
      },
      //页面初始化加载
      InitPageDate() {
          this.datetime1 = XEUtils.toDateString(new Date(), "yyyy-MM"); //起 始结束日期
          this.datetime2 = XEUtils.toDateString(new Date(), "yyyy-MM");
      },
      //表格方法
      currentchangeEvent({ row, column }) {},
      //后台交互方法
      QueryData() {
          var searchParam = {
              level: this.level,
              qcdate1: this.datetime1,
              qcdate2: this.datetime2,
              instrid: this.instrId,
              inuseflag: this.inuseflag,
              checkflag: this.checkflag,
              drawflag: this.drawflag,
              controlstatus: this.controlstatus,
              monthflag: this.monthflag,
              batchflag: this.batchflag,
          };
          if (!this.instrId) {
              this.$alert("没有选择仪器，无法查询!", "提示");
              return;
          }
          this.$tool
              .request({
                  url: "LIS/LIS5/LIS542",
                  method: "post",
                  data: {
                      action: "query",
                      ...searchParam,
                  },
              })
              .then((res) => {
                  if (res.errcode == "1") {
                      var j = 1;
                      this.ColumnList = [];
                      if (this.monthflag == 1) {
                          for (var key in res.ColumnTiltle) {
                              var column = { field: key, title: res.ColumnTiltle[key], width: "100px" };
                              this.ColumnList.push(column);
                              j++;
                          }
                      }
                      this.tableData = res.Data;
                      if (this.tableData.length > 0) {
                          for (let i = 0; i < this.tableData.length; i++) {
                              this.tableData[i].fourtea = XEUtils.toFixedString((this.tableData[i].qctea - 0) / 4, 2);
                              this.tableData[i].threetea = XEUtils.toFixedString((this.tableData[i].qctea - 0) / 3, 2);
                              this.tableData[i].twotea = XEUtils.toFixedString((this.tableData[i].qctea - 0) / 2, 2);
                              this.tableData[i].qctea = XEUtils.toFixedString(this.tableData[i].qctea, 2);
                              this.tableData[i].measurecv = XEUtils.toFixedString(this.tableData[i].measurecv, 2);
                              this.tableData[i].avgval = XEUtils.toFixedString(this.tableData[i].avgval, 2);
                              this.tableData[i].qccv = XEUtils.toFixedString(this.tableData[i].qccv, 2);
                              if (this.monthflag == 1) {
                                  for (let j = 0; j < this.ColumnList.length; j++) {
                                      if (this.tableData[i][this.ColumnList[j].field]) this.tableData[i][this.ColumnList[j].field] = XEUtils.toFixedString(this.tableData[i][this.ColumnList[j].field] - 0, 3);
                                  }
                              }
                          }
                      }
                  }
              });
      },
      //单元格样式
      ColumnClassName({ row, column }) {
          if (this.ColumnList.filter((item) => item.field == column.property).length > 0 || column.property == "measurecv") {
              if (row[column.property] - 0 > row.qccv - 0) {
                  return "highCV";
              }
          }
      },
      instrChange(code, name) {
          this.instrId = code;
          this.instrname= name;
      },
      levelChange(code, name) {
          this.level = code;
          this.levelname = name;
      },
      //导出
      btnExport() {
          let data = this.getExportData();
          let filtertxt = this.getExportFilter();
          this.$pub.exportTableExcelWithData(data, this.exportTableColLen, "质控月统计报表.xlsx", filtertxt, "统计查询：");
      },
      // 获取当前导出文件的所有查询条件
      getExportFilter() {
          let filtertxt = "起始月份:" + XEUtils.toDateString(this.datetime1, "yyyy-MM")  + "; ";
          filtertxt += "结束月份:" + XEUtils.toDateString(this.datetime2, "yyyy-MM")  + "; ";
          if(this.instrId) filtertxt += "质控仪器:" + this.instrname + "; ";
          if(this.level) filtertxt += "水平:" + this.levelname + "; ";
          if(this.inuseflag == "1") filtertxt += "包含不累计; ";
          if(this.controlstatus == "1") filtertxt += "包含失控; ";
          if(this.drawflag == "1") filtertxt += "包含不画图; ";
          if(this.checkflag == "1") filtertxt += "包含未审核; ";
          if(this.monthflag == "1") filtertxt += "按月统计; ";
          if(this.batchflag == "1") filtertxt += "按批号; ";
          if(this.avgflag == "1") filtertxt += "显示均值; ";
          return filtertxt;
      },
      getExportData() {
          var allcolumns = this.$refs.xTable1.getColumns();
          var tableColumn = [];
          for (let i = 0; i < allcolumns.length; i++) {
              tableColumn.push({ field: allcolumns[i].property, title: allcolumns[i].title });
          }
          let datas = this.tableData;
          this.exportTableColLen = tableColumn.length;
          let columns = tableColumn.filter((item) => item.field);
          let headers = [columns.map((item) => item.title)];
          return headers.concat(
              datas.map((row) => {
                  return columns.map((column) => {
                      return row[column.field];
                  });
              })
          );
      },
  },
};
</script>


<style scoped>
::v-deep .highCV {
  color: #ff0000;
}
.pagetop {
  width: 100%;
  height: 72px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
}
.pagecenter {
  position: absolute;
  top: 76px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}
.middle-right {
  position: absolute;
  height: 100%;
  right: 0px;
  bottom: 0px;
  overflow: visible;
}
.middle-center {
  position: absolute;
  height: 100%;
  overflow: auto;
}

table tr td:nth-child(1) {
  width: 80px;
}
.QueryTable tr td:nth-child(odd) {
  text-align: right;
  white-space: nowrap;
  font-size: 12px;
  width: 80px;
  font-weight: bold;
}
</style>